<!DOCTYPE html>
<html>
<head>
    <title>Signal Transmission Line Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physics-canvas"></canvas>
    <script>
        const canvas = document.getElementById('physics-canvas');
        const ctx = canvas.getContext('2d');

        // Set canvas dimensions
        canvas.width = 700;
        canvas.height = 400;

        // Fill background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // General drawing styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '22px sans-serif';
        ctx.textAlign = 'center';

        // Define coordinates and dimensions
        const lineY = 190;
        const boxX = 50;
        const boxSize = 80;
        const boxY = lineY - boxSize / 2;
        
        const dimStartX = 170;
        const dimEndX = 470;
        const dimLineY = 110;

        const ampBaseX = dimEndX;
        const ampTipX = ampBaseX + 80;
        const ampHeight = 100;

        // 1. Draw Exchange Box
        ctx.strokeRect(boxX, boxY, boxSize, boxSize);
        ctx.fillText('exchange', boxX + boxSize / 2, boxY + boxSize + 30);

        // 2. Draw Amplifier
        ctx.beginPath();
        ctx.moveTo(ampBaseX, lineY - ampHeight / 2);
        ctx.lineTo(ampTipX, lineY);
        ctx.lineTo(ampBaseX, lineY + ampHeight / 2);
        ctx.closePath();
        ctx.stroke();
        
        // Amplifier Text
        const ampCenterX = ampBaseX + (ampTipX-ampBaseX)/2;
        ctx.fillText('amplifier', ampCenterX, lineY + ampHeight / 2 + 30);
        ctx.fillText('gain 115 dB', ampCenterX, lineY + ampHeight / 2 + 55);

        // 3. Draw Transmission Line
        // Solid part from exchange box
        ctx.setLineDash([]);
        ctx.beginPath();
        ctx.moveTo(boxX + boxSize, lineY);
        ctx.lineTo(dimStartX, lineY);
        ctx.stroke();

        // Dashed part for 52 km
        ctx.setLineDash([7, 7]);
        ctx.beginPath();
        ctx.moveTo(dimStartX, lineY);
        ctx.lineTo(dimEndX, lineY);
        ctx.stroke();
        
        // Dashed part from amplifier output
        ctx.beginPath();
        ctx.moveTo(ampTipX, lineY);
        ctx.lineTo(canvas.width, lineY);
        ctx.stroke();

        // 4. Draw Dimensioning Elements
        // Vertical dashed lines
        ctx.beginPath();
        ctx.moveTo(dimStartX, lineY - 5);
        ctx.lineTo(dimStartX, dimLineY + 5);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(dimEndX, lineY - 5);
        ctx.lineTo(dimEndX, dimLineY + 5);
        ctx.stroke();

        // Horizontal dimension line with arrows
        ctx.setLineDash([]);
        const arrowSize = 10;
        
        ctx.beginPath();
        ctx.moveTo(dimStartX, dimLineY);
        ctx.lineTo(dimEndX, dimLineY);
        ctx.stroke();
        
        // Left arrow head
        ctx.beginPath();
        ctx.moveTo(dimStartX + arrowSize, dimLineY - arrowSize / 2);
        ctx.lineTo(dimStartX, dimLineY);
        ctx.lineTo(dimStartX + arrowSize, dimLineY + arrowSize / 2);
        ctx.stroke();
        
        // Right arrow head
        ctx.beginPath();
        ctx.moveTo(dimEndX - arrowSize, dimLineY - arrowSize / 2);
        ctx.lineTo(dimEndX, dimLineY);
        ctx.lineTo(dimEndX - arrowSize, dimLineY + arrowSize / 2);
        ctx.stroke();

        // Dimension text
        ctx.fillText('52 km', (dimStartX + dimEndX) / 2, dimLineY - 15);

        // 5. Draw Figure Caption
        ctx.fillText('Fig. 5.1', canvas.width / 2, 360);
    </script>
</body>
</html>